<template>
  <van-nav-bar title="登录" left-text="返回" left-arrow safe-area-inset-top @click-left="onClickLeft" />
  <div class="Login">
    <img :src="topimg" alt="" srcset="" />
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field v-model="phone" name="phone" label="手机" placeholder="请输入手机号" :rules="[{ required: true }]" />
        <van-field v-model="phonecode" center clearable name="phonecode" label="验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="primary" @click="gocode" :disabled="disabled">{{ btnText }}</van-button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">立即登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
  <!-- <div style="margin: 16px">
    <van-button round block type="primary" @click="onCLickSubmit">一键登录</van-button>
  </div> -->
  <div class="yszc">
    <p>登录成功后，即表示您已同意</p>
    <router-link to="/mine/setting/userrule">用户协议</router-link> 和
    <router-link to="/mine/setting/privacy">隐私政策</router-link>
  </div>
</template>

<script>
import { Post } from "@/api/axios";
import { reactive, toRefs } from "vue";
import $router from "../router/index";
import { Toast } from "vant";
export default {
  name: "Login",
  setup() {
    const state = reactive({
      phone: "",
      phonecode: "",
      disabled: false,
      count: 0,
      tmier: undefined,
      appname: window.appname,
    });

    const onSubmit = async (value) => {
      if (value.phonecode === "") {
        Toast("请输入验证码");
      } else {
        const phoneType = localStorage.getItem("phoneType");
        let data;
        if (phoneType == "iOS") {
          try {
            data = await Post({
              url: "/login/loginbyphonecode",
              data: {
                ...value,
                platform: "ios",
                imei: JSON.stringify({ idfa: localStorage.getItem("idfa") }),
              },
            });
          } catch (error) {
            Toast(error.data.message);
            state.phonecode = "";
          }
        }
        if (phoneType == "Android") {
          try {
            data = await Post({
              url: "/login/loginbyphonecode",
              data: {
                ...value,
                platform: "android",
                imei: localStorage.getItem("imei"),
              },
            });
          } catch (error) {
            Toast(error.data.message);
            state.phonecode = "";
          }
        }
        if (phoneType == "web") {
          try {
            data = await Post({
              url: "/login/loginbyphonecode",
              data: {
                ...value,
                platform: "web",
                imei: localStorage.getItem("imei"),
              },
            });
          } catch (error) {
            Toast(error.data.message);
            state.phonecode = "";
          }
        }
        if (!phoneType) {
          try {
            data = await Post({
              url: "/login/loginbyphonecode",
              data: value,
            });
          } catch (error) {
            Toast(error.data.message);
            state.phonecode = "";
          }
        }
        if (data.data.code == 200) {
          Toast("登录成功");
          localStorage.setItem("usedata", JSON.stringify(data.data.data));
          localStorage.setItem("token", data.data.token);
          $router.push("/home");
        }
      }
    };
    const gocode = async () => {
      if (state.phone === "") {
        Toast("请先输入手机号");
      } else {
        let reg_tel =
          /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
        let regtel = reg_tel.test(state.phone);
        if (regtel) {
          (state.disabled = true),
            (state.count = 60),
            (state.tmier = setInterval(() => {
              state.count--;
              if (state.count == 0) {
                (state.disabled = false), clearInterval(state.tmier);
              }
            }, 1000));
          let data = await Post({
            url: "/login/sendphone",
            data: { phone: state.phone },
          });
          Toast("验证发送成功");
          console.log(data.data);
        } else {
          Toast("请正确填写您的手机号码");
        }
      }
    };
    const onClickLeft = () => {
      $router.push("/mine");
    };

    let topimg = require("../assets/login/loginbj.png");

    return {
      topimg,
      ...toRefs(state),
      onSubmit,
      gocode,
      onClickLeft,
      // onCLickSubmit,
    };
  },
  computed: {
    btnText() {
      return this.count !== 0 ? `${this.count}秒再次获取` : "获取验证码";
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
  color: #108de8;
}
.Login {
  img {
    width: 100%;
  }
  .dl {
    text-align: center;
    color: #75c1fe;
    font-size: 20px;
  }
  .form {
    width: 94%;
    margin: 0 auto;
  }
}
.yszc {
  margin-top: 75px;
  color: #333;
  font-size: 13px;
  text-align: center;
}
</style>